import React, { useCallback } from "react";
import { FC } from "react";
import { useDispatch } from "react-redux";
import { changeTabBar } from "../../../store/actions/tabbarindex.action";
import "./tabbar.css";

interface Props {
  children: string;
  isSelected?: boolean;
  index: number;
}

const Tab: FC<Props> = ({ children, isSelected = false, index = 0 }) => {
  const dispatch = useDispatch();
  const changeTabBarIndex = useCallback(() => {
    dispatch(changeTabBar(index));
  }, [dispatch, index]);
  return (
    <div className="tab-item" onClick={changeTabBarIndex}>
      <div className={isSelected ? "tab-selected" : ""}>
        <span>{children}</span>
      </div>
    </div>
  );
};

export default Tab;
